<template>
    <div class="courseContainer">
        <p class="title">训练课程</p>
        <div class="courses">
            <ul ref="course">
                <li v-for="course in courses" :key="course.id">
                    <div class="courseContent">
                        <div class="introImg"></div>
                        <p class="courseTitle">{{ course.title }}</p>
                        <p class="vip">会员专享</p>
                        <div class="head" :style="{backgroundImage:'url('+backImg()+')'}"></div>
                        <div class="intro">
                            <p class="user">{{ course.user }}</p>
                            <p class="userInfo">{{ course.userInfo }}</p>
                        </div>
                        <p class="time">{{ course.hour }}小时{{ course.min }}分钟</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="dots">
                <div class="dotContainer">
                    <div class="dot" v-for="course in courses" :key="course.id"></div>
                </div>
            </div>
        <p class="title">推荐课程</p>
        <div class="content">
            <ul>
                <li v-for="free in frees" :key="free.id">
                    <div class="free">
                        <div class="showImg"></div>
                        <p class="freeTitle">{{ free.title }}</p>
                        <div class="freeIntro">
                            <p class="freeUser">{{ free.user }}</p>
                            <p class="freeInfo">{{ free.userInfo }}</p>
                        </div>
                        <p class="tell">免费</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'sportCourse',
        data(){
            return{
                courses:[
                    {id:'001',title:'初级拉伸训练',user:'Dannel',userInfo:'多囊运动专家',hour:2,min:30},
                    {id:'002',title:'初级拉伸训练',user:'Dannel',userInfo:'多囊运动专家',hour:2,min:30},
                    {id:'003',title:'初级拉伸训练',user:'Dannel',userInfo:'多囊运动专家',hour:2,min:30},
                    {id:'004',title:'初级拉伸训练',user:'Dannel',userInfo:'多囊运动专家',hour:2,min:30}
                ],
                frees:[
                    {id:'001',title:'改善训练',user:'Dannel',userInfo:'多囊运动专家'},
                    {id:'002',title:'改善训练',user:'Dannel',userInfo:'多囊运动专家'}
                ]
            }
        },
        computed:{
            backImg(){
                return ()=>{
                    return require('../assets/img/1-icon@2x/1-15professor.png')
                }
            }
        },
    }
</script>

<style scoped>
    .courseContainer{
        width: 100%;
    }
    .title{
        margin-left: .32rem;
        margin-top: .4rem;
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .courses{
        width: 100%;
        margin-top: .2rem;
        overflow: scroll;
        scrollbar-width: none; 
    }
    .courses ul{
        width: 25.2rem;
        padding-bottom: .2rem;
        padding-top: .2rem;
    }
    .courseContent{
        float: left;
        height: 5.8rem;
        width: 6rem;
        background-color: #FFF;
        border-radius: .3rem;
        margin-left: .15rem;
        margin-right: .15rem;
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 0.1rem 0.04rem #b7b7b734;
    }
    .introImg{
        background-color: #F6F8FA;
        width: 90%;
        height: 3rem;
        margin: 0 auto;
        margin-top: .4rem;
        border-radius: .3rem;
        background-position: center;
        background-size: cover;
        background-image: url(../assets/img/example/sportIntro.png);
        background-repeat: no-repeat;
    }
    .courseTitle{
        font-size: .36rem;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        margin-left: .3rem;
        margin-top: .3rem;
    }
    .vip{
        color:#2a82e4;
        font-family: 'PingFangSC-Mediuem';
        font-size: .3rem;
        position: absolute;
        right: .3rem;
        top: 3.7rem;
    }
    .head{
        width: .48rem;
        height: .5rem;
        background-position: center;
        background-size: contain;
        margin-left: .3rem;
        margin-top: .25rem;
    }
    .intro{
        position: absolute;
        left: 1rem;
        top: 4.35rem
    }
    .user{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .26rem;
        margin-bottom: .05rem;
    }
    .userInfo{
        font-family: 'PingFangSC-Regular';
        color:#3333337f;
        font-size: .22rem;
    }
    .time{
        font-family: 'PingFangSC-Regular';
        color:#2a82e4;
        position: absolute;
        left: 1rem;
        top:5.2rem;
        font-size: .26rem;
    }
    .dots{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dotContainer{
        display: flex;
        width: .85rem;
        justify-content: space-evenly;
        margin-top: .2rem;
    }
    .dot{
        width: 0.08rem;
        height: 0.08rem;
        border-radius: 50%;
        background-color: #999999;
    }
    .content{
        margin-top: .2rem;
        margin-left: .32rem;
        padding-bottom: 2rem;
    }
    .content ul{
        width: 6.86rem;
        display: flex;
        flex-direction: column;
    }
    .free{
        width: 100%;
        height: 2rem;
        background-color: #FFF;
        border-radius: .3rem;
        margin-bottom: .2rem;
        overflow: hidden;
        position: relative;
    }
    .showImg{
        background-color: #F6F8FA;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: .3rem;
        margin-left: .3rem;
        margin-top: .35rem;
        background-image: url(../assets/img/example/backImgFirst.png);
        background-position: center;
        background-size: cover;
    }
    .freeTitle{
        position: absolute;
        top:.35rem;
        left: 2rem;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .32rem;
    }
    .freeIntro{
        position: absolute;
        left: 2rem;
        top:1rem;
    }
    .freeUser{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .26rem;
        margin-bottom: .05rem;
    }
    .freeInfo{
        font-family: 'PingFangSC-Regular';
        color:#3333337f;
        font-size: .22rem;
    }
    .tell{
        position: absolute;
        color:#2a82e4;
        font-family: 'PingFangSC-Mediuem';
        font-size: .25rem;
        right: .3rem;
        bottom: .3rem;
    }
</style>